<template>
  <van-button class="toolmenu" @click="show = true" icon="bag" />
  <van-action-sheet v-model:show="show" :actions="actions" @select="onSelect" />
</template>

<script setup>
import { measured } from "./Hooks/measured"
const map = ref()
const value1 = ref(0)
onMounted(() => {
  //初始化地图
  map.value = useGlobalMap()
})
const { distance, measuredArea, cancal } = measured(map)
const show = ref(false)
const actions = [
  { id: 1, name: "测距" },
  { id: 2, name: "测面" },
  { id: 3, name: "关闭" },
]
const onSelect = (item) => {
  // 默认情况下点击选项时不会自动收起
  // 可以通过 close-on-click-action 属性开启自动收起
  console.log(item)
  show.value = false
  // showToast(item.name)
  if (item.id == 1) {
    distance()
  } else if (item.id == 2) {
    measuredArea()
  } else if (item.id == 3) {
    cancal()
  }
}
</script>

<style scoped>
.toolmenu {
  width: 25px;
  height: 25px;
  background-color: rgba(255, 255, 255, 0.5);
  position: fixed;
  top: 130px;
  right: 5px;
  z-index: 100;

  border: none;
  border-radius: 10px;
}
</style>
